<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ page contentType="text/html; charset=utf-8"%>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>商家管理系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/css/bus-style.css" media="all">
    <link rel="stylesheet" type="text/css" href="/css/plugins/layui-formSelect/formSelects-v4.css"/>
    <style>
        .diy-input{
            height: 35px;
            border:1px solid #ccc;
            border-radius: 2px;
            width: 100px;
            text-align: center;
        }
        .model-add{
            width: 80px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
        }
        .model-delete{
            width: 80px;
            height: 30px;
            line-height: 30px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
        }
        .margin-div{
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div class="layui-col-md12">
    <div class="layui-card">
        <div class="layui-col-md-offset11">
            <button class="layui-btn layui-btn-sm layui-btn-normal" style="margin-top: 5px;" onclick="history.go(-1)">返回上一页</button>
        </div>
        <div class="layui-card-body">
            <div class="layui-tab layui-tab-brief" lay-filter="test">
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show" style="margin-top: 20px">
                        <form class="layui-form" id="expModelEditForm">
                            <input type="hidden" name="id" value="${expConfig.id}">

                            <div class="layui-form-item">
                                <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>物流提鸡模板</label>
                                <div class="layui-col-sm5">
                                    <input type="radio" 	lay-filter="isFarm"  name="isFarm" value="1" title="是" ${expConfig.isFarm==1?'checked':''} >
                                    <input type="radio" lay-filter="isFarm"  name="isFarm" value="0" title="否"  ${expConfig.isFarm==0?'checked':''} >
                                </div>
                            </div>

                            <div class="layui-form-item">
                                <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>模板名称</label>
                                <div class="layui-col-sm5">
                                    <input type="text" name="name" class="layui-input" value="${expConfig.name}" placeholder="模板名称">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>计价方式</label>
                                <div class="layui-col-sm4">
                                    <input type="hidden" id="checkType">
                                    <c:forEach items="${valuationList}" var="v">
                                        <input type="radio" name="valuationType" value="${v.id}" title="${v.name}" ${expConfig.valuationType==v.id?'checked':''}>
                                    </c:forEach>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>包邮规则</label>
                                <div class="layui-col-sm5">
                                    <input type="text" name="money" class="layui-input" value="${expConfig.money}" placeholder="满足当前金额则免邮，如果是0不作为计算">
                                    <input type="text" name="vals" class="layui-input" value="${expConfig.vals}" style="margin-top: 10px"
                                           placeholder="满足当前数量/重量则免邮，按照商品属性来，如果是0不作为计算">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>默认运费</label>
                                <div class="layui-col-sm1"  style="width: 60px">
                                    <input type="text" class="layui-input" name="beginNum" value="${bExpDetail.beginNum}" placeholder="多少">
                                </div>
                                <div class="layui-col-sm1" style="line-height: 38px;width: 40px;text-align: center">
                                    <span>件内</span>
                                </div>
                                <div class="layui-col-sm1" style="width: 60px">
                                    <input type="text" class="layui-input" name="beginMoney" value="${bExpDetail.beginMoney}" placeholder="多少">
                                </div>
                                <div class="layui-col-sm1" style="line-height: 38px;width: 30px;">
                                    <span>&nbsp;&nbsp;元,</span>
                                </div>
                                <div class="layui-col-sm1" style="line-height: 38px;width: 50px;">
                                    <span>每增加</span>
                                </div>
                                <div class="layui-col-sm1" style="width: 60px">
                                    <input type="text" class="layui-input" name="addNum" value="${bExpDetail.addNum}" placeholder="多少">
                                </div>
                                <div class="layui-col-sm1" style="line-height: 38px;width: 110px;">
                                    <span>&nbsp;&nbsp;件；运费增加&nbsp;</span>
                                </div>
                                <div class="layui-col-sm1" style="width: 75px">
                                    <input type="text" class="layui-input" name="addMoney" value="${bExpDetail.addMoney}" placeholder="多少">
                                </div>
                                <textarea name="addrDetail" hidden>0::0</textarea>
                            </div>
                            <hr>
                            <div class="layui-form-item">
                                <div class="layui-col-sm1 layui-col-sm-offset3">
                                    <i class="layui-icon layui-icon-add-1 layui-badge layui-bg-blue model-add" onclick="addModel()">&nbsp;添加地区</i>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-col-sm5 layui-col-sm-offset2">
                                    <blockquote class="layui-elem-quote">添加地区后，点击"选择地址"可查看已选中的区域。</blockquote>
                                </div>
                            </div>
                            <hr>
                            <div id="dynamicAdd">
                                <c:forEach items="${detailList}" var="d" varStatus="dd">
                                    <div class="one" data-id="${dd.index+1}">
                                        <div class="layui-form-item" style="margin-top: 30px">
                                            <label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>指定区域</label>
                                            <div class="layui-col-sm2 layui-col-sm-offset1">
                                                <i class="layui-icon layui-icon-flag layui-badge layui-bg-blue model-add" data-id="parentInput${dd.index+1}"
                                                   onclick="selectAddress(this)">&nbsp;选择地址</i>
                                            </div>
                                            <div class="layui-col-sm2">
                                                <textarea name="addrDetail" id="parentInput${dd.index+1}" hidden>${d.addressEdit}</textarea>
                                            </div>
                                            <div class="layui-col-sm2">
                                                <span class="red has"></span>
                                            </div>
                                            <div class="layui-col-sm1 layui-col-sm-offset1">
                                                <i class="layui-icon layui-icon-delete layui-badge layui-bg-gray model-delete"
                                                   onclick="deleteModel(this,${d.id})">&nbsp;删除</i>
                                            </div>
                                        </div>
                                        <div class="layui-form-item">
                                            <label class="layui-col-sm1 layui-col-sm-offset1">&nbsp;</label>
                                            <div class="layui-col-sm1"  style="width: 60px">
                                                <input type="text" class="layui-input" name="beginNum" value="${d.beginNum}" placeholder="多少">
                                            </div>
                                            <div class="layui-col-sm1" style="line-height: 38px;width: 40px;text-align: center">
                                                <span>件内</span>
                                            </div>
                                            <div class="layui-col-sm1" style="width: 60px">
                                                <input type="text" class="layui-input" name="beginMoney" value="${d.beginMoney}" placeholder="多少">
                                            </div>
                                            <div class="layui-col-sm1" style="line-height: 38px;width: 30px;">
                                                <span>&nbsp;&nbsp;元,</span>
                                            </div>
                                            <div class="layui-col-sm1" style="line-height: 38px;width: 50px;">
                                                <span>每增加</span>
                                            </div>
                                            <div class="layui-col-sm1" style="width: 60px">
                                                <input type="text" class="layui-input" name="addNum" value="${d.addNum}" placeholder="多少">
                                            </div>
                                            <div class="layui-col-sm1" style="line-height: 38px;width: 110px;">
                                                <span>&nbsp;&nbsp;件；运费增加&nbsp;</span>
                                            </div>
                                            <div class="layui-col-sm1" style="width: 75px">
                                                <input type="text" class="layui-input" name="addMoney" value="${d.addMoney}" placeholder="多少">
                                            </div>
                                        </div>
                                    </div>
                                </c:forEach>
                            </div>
                        </form>
                        <div class="layui-form-item layui-layout-admin">
                            <div class="layui-input-block">
                                <div class="layui-footer" style="left: 0;">
                                    <button class="layui-btn" onclick="saveExpModel()">保存</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="/layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="/js/jquery/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.form.js"></script>
<script type="text/javascript" src="/js/common.js"></script>
<script>
    var lastId = $("#dynamicAdd").children("div.one:last").attr("data-id");
    layui.config({
        //静态资源所在路径
        base: '/layuiadmin/'
    }).extend({
        //主入口模块
        index: 'lib/index'
    }).use(['index', 'form'], function(){
        var $ = layui.$,form = layui.form;
        form.render();

        // form.on('radio(isFarm)', function(data){
        //     if(data.value==1){
        //         $("[name='name']").val("物流提鸡模板");
        //         $("[name='money']").val("9999");
        //         $("[name='vals']").val("9999");
        //     }else {
        //         $("[name='name']").val("");
        //         $("[name='money']").val("");
        //         $("[name='vals']").val("");
        //     }
        // });
    });

    function addModel() {
        lastId ++;
        var expModel = "";
        expModel += '<div class="one">';
        expModel += '<div class="layui-form-item" style="margin-top: 30px">';
        expModel += '<label class="layui-col-sm1 layui-col-sm-offset1"><span class="red">*&nbsp;</span>指定区域</label>';
        expModel += '<div class="layui-col-sm2 layui-col-sm-offset1">';
        expModel += '<i class="layui-icon layui-icon-flag layui-badge layui-bg-blue model-add" data-id=\'parentInput'+lastId+'\' onclick="selectAddress(this)">&nbsp;选择地址</i>';
        expModel += '</div>';
        expModel += '<div class="layui-col-sm2">';
        expModel += '<textarea name="addrDetail" id=\'parentInput'+lastId+'\' hidden></textarea>';
        expModel += '</div>';
        expModel += '<div class="layui-col-sm1"><span class="red has"></span></div>';
        expModel += '<div class="layui-col-sm1">';
        expModel += '<i class="layui-icon layui-icon-delete layui-badge layui-bg-gray model-delete" onclick="deleteModel(this)">&nbsp;删除</i></div></div>';
        expModel += '<div class="layui-form-item">';
        expModel += '<label class="layui-col-sm1 layui-col-sm-offset1">&nbsp;</label>';
        expModel += '<div class="layui-col-sm1"  style="width: 60px">';
        expModel += '<input type="text" class="layui-input" name="beginNum" placeholder="多少"></div>';
        expModel += '<div class="layui-col-sm1" style="line-height: 38px;width: 40px;text-align: center"><span>件内</span></div>';
        expModel += '<div class="layui-col-sm1" style="width: 60px">';
        expModel += '<input type="text" class="layui-input" name="beginMoney" placeholder="多少"></div>';
        expModel += '<div class="layui-col-sm1" style="line-height: 38px;width: 30px;"><span>&nbsp;&nbsp;元,</span></div>';
        expModel += '<div class="layui-col-sm1" style="line-height: 38px;width: 50px;"><span>每增加</span></div>';
        expModel += '<div class="layui-col-sm1" style="width: 60px">';
        expModel += '<input type="text" class="layui-input" name="addNum" placeholder="多少"></div>';
        expModel += '<div class="layui-col-sm1" style="line-height: 38px;width: 110px;">';
        expModel += '<span>&nbsp;&nbsp;件；运费增加&nbsp;</span></div>';
        expModel += '<div class="layui-col-sm1" style="width: 75px">';
        expModel += '<input type="text" class="layui-input" name="addMoney" placeholder="多少"></div>';
        expModel += '</div>';
        $("#dynamicAdd").append(expModel);
    }

    /* 删除当前指定区域的运费模板 */
    function deleteModel(v,id){
        layer.confirm('该操作不可逆，确认要删除吗？',function (index) {
            $.ajax({
                url: "/exp/deleteExpDetail",
                data: {"id":id},
                dataType: "json",
                type: "post",
                success: function (data) {
                    layer.close(index);
                    if(data.status){
                        layer.msg(data.desc);
                        setTimeout(function () {
                            $(v).parent().parent().parent().remove();
                            window.location.reload();
                        }, 1000)
                    }else{
                        layer.msg(data.desc);
                    }
                }
            });
        });
    }

    /* 选择地址并回显中 */
    function selectAddress(v){
        var id = $(v).attr("data-id");
        var addr = $("#"+id).text();
        console.log(addr)

        layer.open({
            title:'选择地址',
            type: 2,
            area: ['600px', '500px'],
            content: '/exp/expAddress?modelId='+id + '&addr=' + addr
        })
    }

    function saveExpModel(){
        $("#expModelEditForm").ajaxSubmit({
            type: 'post',
            url: "/exp/editExpModel",
            data: $("#expModelEditForm").serialize(),
            dataType: 'json',
            success: function (data) {
                if (data.status) {
                    layer.msg(data.desc,{icon:1});
                    setTimeout(function () {
                        window.location.href = "/exp/expModel";
                    }, 1000)
                } else {
                    layer.msg(data.desc,{icon:2});
                }
            },
            error: function () {
                layer.msg("请检查页面信息是否正确",{icon:2});
            }
        });
    }
</script>
</body>
</html>